<template>
  <div id="nav">
    <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> -->
    <div id="navi-bar">
        <div class="navi-bar-container">
          <div class="navi-bar-left">
            <div class="navi-bar-left1">
              <p>码上优聘</p> | 
              <div class="navi-bar-locate">
                <img src="./assets/icon_location.png">
                福州
              </div>
            </div>
            <div class="navi-bar-left2">
              <router-link to="/">首页</router-link>
              <router-link to="/profession?searchkey=">职位</router-link>
              <router-link to="/company">公司</router-link>
              <router-link to="/appPage">APP</router-link>
            </div>
            <div class="navi-bar-right">
              无忧技术 无忧工作
            </div>
          </div>
        </div>

    </div>
    <router-view/>
    <!-- 页脚 -->
    <div id="footer">
      <div class="footer-list footer-list-margin">
        <p>使用和帮助</p>
        <ul>
          <li>服务协议</li>
          <li>隐私政策</li>
          <li>职位发布规则备份</li>
        </ul>
      </div>
      <div class="footer-list footer-list-margin">
        <p>联系我们</p>
        <ul>
          <li>福建省福州市闽侯县上街镇海西科技园中国冶金地质大厦B栋第12层01、02单元</li>
          <li>联系电话：18888888888</li>
          <li>举报邮箱：code_education@</li>
        </ul>
      </div>
      <div class="footer-list">
        <p>App下载</p>
        <div style="width:94px;height:94px;margin-top:36px;">
          <img src="./assets/code.png" alt="" style="width:94px;">
        </div>
      </div>

      <div class="bah">备案号：闽ICP备19026373号-2</div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
  display: inline-block;
}

li{
  display: inline-block;
}

a{
  text-decoration-line: none;
}

.left{
  float:left;
}

.right{
  float:right;
}

.inline{
  display: inline-block;
  /* 解决div并排错位 */
  vertical-align:top;
}

.showing{
  display: block;
}

.hiding{
  display: none;
}

/* 导航栏 */
#navi-bar{
  width: 1920px;
  height: 56px;
  margin: 0 !important;
}

#navi-bar .navi-bar-container{
  width: 1184px;
  height: 56px;
  margin: 0 auto;
}

#navi-bar .navi-bar-left1{
  display: inline-block;
}

#navi-bar .navi-bar-left1 p{
  font-size: 18px;
  font-weight: bold;
  color: #3D7EFF;
  line-height: 56px;
  display: inline-block;
  margin-right: 16px;
}

#navi-bar .navi-bar-left1 .navi-bar-locate{
  display: inline-block;
  margin-left: 48px;
  line-height: 56px;
  position: relative;
  color: #3D7EFF;
  font-size: 16px;
}

#navi-bar .navi-bar-left1 .navi-bar-locate img{
  position: absolute;
  top:21px;
  left: -34px;
}

#navi-bar .navi-bar-left2{
  display: inline-block;
  margin-left: 78px;
}

#navi-bar .navi-bar-left2 a{
  margin-left: 21px;
  margin-right: 21px;
  font-size: 14px;
  color: #273B4E;
}

#navi-bar .navi-bar-left2 a.router-link-exact-active {
  color: #3D7EFF;
}

#navi-bar .navi-bar-right{
  line-height: 56px;
  font-size: 14px;
  color: #34495E;
  float: right;
  display: inline-block;
  width: 121px;
}

#footer{
  background-color: black;
  height: 268px;
  width: 1920px;
  padding: 40px 368px;
  box-sizing: border-box;
}

#footer .footer-list{
  display: inline-block;
  /* 解决div并排错位 */
  vertical-align:top;
}

#footer .footer-list-margin{
  margin-right: 228px;
}

#footer ul li{
  display: block;
  color: white;
  opacity: 0.6;
  padding: 12px 0;
  font-size: 14px;
}

#footer ul li:hover{
  opacity: 1;
}

#footer p{
  color: white;
  margin-bottom: 24px;
}

#footer .bah{
  font-size: 14px;
  color: white;
  opacity: 0.6;
  text-align: center;
  margin-top:10px;
}
</style>
